<template>
  <div class="chart-wrapper" ref="funnelChart"></div>
</template>

<script>
import echarts from "echarts";
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
import { debounce } from "@/utils/index.js";

export default {
  name: "funnelChart",
  setup() {
    const funnelChart = ref(null);
    let myChart = ref(null);
    const resizeHandler = debounce(() => {
  
      if (myChart) {
        myChart.resize();
      }
    }, 200);

    onMounted(() => {
      getBoxData();
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
    });

    // //模拟接口,获取echarts数据
    const getBoxData = async () => {

      initEcharts();
    };

    //渲染echarts图
    const initEcharts = () => {
      myChart = echarts.init(funnelChart.value);
      myChart.setOption(
        {

          // title: {
          //   text: '所有',
          //   position:'center',
          //   textStyle: {
          //     color: '#fff'
          //   },
          // },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            show: false,
            data: ['单位:千米'],
            type: 'scroll',
            left: '70%',
            textStyle: {
              color: '#000',
              fontSize: 9,
            }
          },
          grid: {
            top: '12%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLabel: {
              show: true,
              color: '#000',
              fontSize: 9,
            },
            splitLine: {
              // show: false,
              lineStyle: {
                color: "#e6e6e6",
                type: 'dashed'
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#e6e6e6"
              }
            }
          },
          yAxis: {
            type: 'category',
            data: ['不明管线', '综合连廊', '工业管线', '通信管线', '市政热力管理', '市政燃气管线', '市政排水管线', '市政供水管线'],
            splitLine: { show: false },
            axisLabel: {
              show: true,
              color: '#000',
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255, 255, 255, 1)"
              }
            }
          },
          // dataZoom: [
          //   {
          //     type: 'slider',
          //     realtime: true,
          //     start: 8,
          //     end: 5, // 数据窗口范围的结束百分比。范围是:  ~ 188。
          //     height: 5,//组件高度
          //     left: 5,//左边的距离
          //     right: 5,//右边的距离
          //     bottom: 19,//下边的距离
          //     show: true, // 是否展示
          //     fillerColor: "rgba(17,188,218,日.42)",// 滚动条额色borderColor: "rgba(17, 188, 218,.12)"
          //     //两边手柄尺寸handlesize: 
          //     showDetail: false,//拖拽时是否展示滚动条两侧的文字//是否只平移不缩放zoomLock: true.
          //     moveOnMouseMove: false, //鼠标移动能触发数据窗口平移//zoomOnMousewheel: false,//鼠标移动能触发数据窗口缩放

          //   }, {
          //     type: "inside", // 支持内部鼠标滚动平移start: 0.
          //     end: 5,
          //     zoomOnMousewheel: false, // 关闭滚轮缩放
          //     moveOnMouseWheel: true,// 开启滚轮平移
          //     moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
          //   }
          // ],
          series: [
            {
              barWidth: '40%',
              name: '单位:千米',
              type: 'bar',
              color: '#1287EE',
              data: ['20', '40', '60', '60', '60', '80', '70', '30']
            },

          ]
        },
        true
      );

      // myChart.off("click");
      // myChart.on("click", () => {
      //   routerChange("/more");
      // });
    };




    return {
      funnelChart,
    };
  },
};
</script>
